<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video
          controls
          :src="url"
        ></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <!-- 歌手头像 -->
            <img :src="icon" alt="" />
          </div>
          <!-- 歌手名字 -->
          <span class="name">{{ mvinfo.artistName }}</span>
        </div>
        <div class="mv-info">
          <h2 class="title">{{ mvinfo.name }}</h2>
          <span class="date">发布：{{ publishTime }}</span>
          <span class="number">播放：{{ mvinfo.playCount }}</span>
          <p class="desc">{{ mvinfo.desc }}</p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap" v-if="hotComment.length!=0">
        <p class="title">精彩评论<span class="number">({{ hotComment.length }})</span></p>
        <div class="comments-wrap" v-for="(k,index) in hotComment" :key="index" >
          <div class="item" >
            <div class="icon-wrap">
              <img :src="k.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{ k.user.nickname+':      ' }}</span>
                <span class="comment">{{ k.content }}</span>
              </div>
              <div class="re-content" v-if="k.beReplied.length!=0">
                <span class="name">{{ k.beReplied[0].user.nickname+':         ' }}</span>
                <span class="comment">{{ k.beReplied[0].content }}</span>
              </div>
              <div class="date">{{ k.time }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="comment-wrap" v-if="newComment.length!=0">
        <p class="title">最新评论<span class="number">({{total}})</span></p>
        <div class="comments-wrap">
          <div class="item" v-for="(k,index) in newComment" :key="index">
            <div class="icon-wrap">
              <img :src="k.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{ k.user.nickname }}:</span>
                <span class="comment">{{ k.content }}</span>
              </div>
              <div class="re-content" v-if="k.beReplied.length!=0" >
                <span class="name">{{ k.beReplied[0].user.nickname }}</span>
                <span class="comment">{{ k.beReplied[0].user.content }}</span>
              </div>
              <div class="date">{{ k.time }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="5"
        :limit="limit"
      >
      </el-pagination>
    </div>
    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div  class="item" v-for="(k,index) in sMv" :key="index" @click="toMV(k.id)">
            <div class="img-wrap">
              <img :src="k.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{ k.playCount }}</div>
              </div>
              <span class="time">{{ k.duration }}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{ k.name }}</div>
              <div class="singer">{{ k.artistName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total:0, //条数
      page: 1,//页码
      limit:20,//一页几个
      url:'',//mv地址
      sMv:[],//相关mv地址
      mvinfo:{},//mv信息
      icon:'',//头像
      hotComment:[],//热门评论
      newComment:[],//最新评论
      hotCount:0,//评论个数
      mvName:'',//mv名字
      publishTime:''//发布时间
    }
  },
  created(){
    this.getComments()
    this.getinfo()
  },
  methods: {
    handleCurrentChange(val){
      this.page = val //保存页码
      //页面刷新重新获取数据
    },
    //获取评论
    getComments(){
      this.axios.get('comment/mv',{
        params:{
          id:this.$route.query.id,
          limit:10,
          offset:0
        }
      }).then(res=>{
        console.log(res);
        //热门评论
        this.hotComment = res.data.hotComments
        //个数
        this.hotCount = res.data.total
        //最新评论
        this.total = res.data.total
        this.newComment = res.data.comments
      })
    },
    //获取mv信息
    getinfo(){
      this.axios.get('mv/url',{
        params:{
          id:this.$route.query.id
        }
      }).then(res=>{
        this.url = res.data.data.url
      })
      //获取相关mv的播放地址
      this.axios.get('simi/mv',{
        params:{
          mvid:this.$route.query.id
        }
      }).then(res=>{
        this.sMv = res.data.mvs
        console.log(this.sMv);
         //歌曲时间处理
            for(let i =0;i<this.sMv.length;i++){
            let min = parseInt(this.sMv[i].duration/1000/60)
            let sec = parseInt(this.sMv[i].duration/1000%60)
            if(min<10){
              min = '0'+min
            }
            if(sec<10){
              sec = '0'+sec
            }
            this.sMv[i].duration = min+':'+sec
          }
      })
      //获取评论
      this.getComments()
      //获取mv信息
      this.axios.get('mv/detail',{
        params:{
          mvid:this.$route.query.id
        }
      }).then(res=>{
        // console.log(res);
        //mv信息
        this.mvinfo = res.data.data
        //mv发布时间
        this.publishTime = res.data.data.publishTime
        //歌手信息
        this.axios.get('artists',{
          params:{
            id:this.mvinfo.artists[0].id
          }
        }).then(res=>{
          console.log(res);
          //歌手的封面头像
          this.icon = res.data.artist.picUrl
        })
      })
    },
    toMV(id){
      console.log(id);
      this.$router.push(`/mv?id=${id}`)
    }
  },
  watch:{
    '$route.query.id'(){
      this.page=1
      this.getinfo()
    }
  }
}
</script>

<style>

</style>